<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>课程详情</span>
            <van-icon name="ellipsis" size="20"/>
        </header>
        <div class="div1">
            <div class="nav">
                <p>{{list.title}}</p>
                <p style="color:red">{{list.price/100}}￥</p>
                <p>共{{list.sales_num}}课时|有{{list.total_periods}}人报名</p>
                <p>开课时间：{{ list.enter_end_date | formatDate }}</p>
                <van-icon name="star-o" size="20"/>
            </div>
            <div class="team">
                <h3>教学团队</h3>
                <ul>
                    <li v-for="(itme,index) in list2" :key="index">
                        <p><img :src="itme.avatar" alt=""></p>
                        <p>{{ itme.teacher_name }}</p>
                    </li>
                </ul>
            </div>
            <div class="introduce">
                <h3>课程介绍</h3>
                <p v-html="list.course_details"></p>
            </div>
            <div class="outline">
                <h3>课程大纲</h3>
                <p v-html="list.course_details"></p>
                <p>{{list.classify_title}}</p>
            </div>
            <div class="comment">
                <h3>课程评论</h3>
                <img src="@/assets/images/empty.png">
            </div>
        </div>
        <button class="btn">立即报名</button>
    </div>
</template>
<script>
import { list } from "@/request/api.js"
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name:'aa',
    data() {
        return {
            list: {},
            list2: [],
            activeName: 'a'
        };
    },
    methods: {
        ...mapMutations(['course1','course2']),
        back(){
            this.$router.go(-1);
            this.course2()
        },
        save() {
            list({ id: this.$route.query.id }).then(res => {
                // console.log(res);
                this.list = res.data.info;
                this.list2 = res.data.teachers;
            });
        }
    },
    mounted() {
        this.save();
    }
};
</script>

<style lang="scss" scoped>
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.box{
    width:100%;
    height:100vh;
    background: #F0F2F5;
}
.div1{
    margin-top:43px;
    height:87vh;
    overflow: scroll;
}
header{
    width:100%;
    border-bottom:1px solid;
    height:42px;
    display:flex;
    text-align:center;
    padding-top: 5px;
    background:white;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    z-index:100;
    // t: 0;
    .van-icon{
        flex:1
    }
    span{
        flex:4;
        font-size:20px;
    }
}

.nav{
    width:100%;
    background:white;
    position: relative;
    p{
        line-height: 25px;
        font-size: 15px;
        margin-left: 15px;
    }
    .van-icon{
        position: absolute;
        right: 10px;
        top: 5px;
    }
}
.team{
    width: 100%;
    background: white;
    margin-top: 15px;
    padding:.2rem;
    ul{
        li{
            padding:.3rem;
            width: 20%;
            text-align: center;
            img{
                width: 100%;
                border-radius: 50%;
                margin-bottom: 10px;
            }
        }
    }
}
.introduce{
    padding:.2rem;
    width: 100%;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
        line-height: 20px;
    }
}
.outline{
    padding:.2rem;
    width: 100%;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
        line-height: 20px;
    }
}
.comment{
    padding:.2rem;
    width: 100%;
    background: white;
    margin-top: 15px;
    img{
        width: 25%;
        margin-left: 37%;
    }
}
.btn{
    width: 100%;
    height: 40px;
    outline: none;
    background: #EB6100;
    color: white;
    border: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>